<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-container>
        <el-main >
          <el-divider content-position="left" ><h1 style="color: #ff2026">统计平台：统计各停车场车位数据</h1></el-divider>
          <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
          <div id="main" style="width: 600px;height:900px;"></div>
        </el-main>
        <el-main>
          <el-divider content-position="left"><h1>详细信息</h1></el-divider>
          <div id="child" style="width: 800px;height:400px;" >

            <!--列表-->
            <el-table size="small" @selection-change="selectChange" :data="data2" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">

              <el-table-column type="index"  align="center"   label="编号" width="50"></el-table-column>
              <el-table-column align="center"  prop="parkingLotVO.plName" label="停车场" width="120"></el-table-column>
              <el-table-column align="center"  prop="caTotal" label="车位总数量" width="120"></el-table-column>
              <el-table-column align="center"  prop="caSurplus" label="车位剩余数量" width="120"></el-table-column>
              <el-table-column align="center"  prop="caPrice" label="车位停车价格" min-width="70">

              </el-table-column>

              <el-table-column align="center" label="操作" min-width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--                  <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">注销</el-button>-->
                </template>
              </el-table-column>
            </el-table>

            <!-- 编辑界面 -->
            <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
              <el-form label-width="100px" ref="editForm" :model="editForm" :rules="rules">

                <el-form-item label="停车场" prop="plName" required="true">
                  <el-input size="small" v-model="editForm.plName" auto-complete="off"  disabled></el-input>
                </el-form-item>

                <el-form-item label="车位总数量" prop="caTotal" required="true">
                  <el-input size="small" v-model="editForm.caTotal" auto-complete="off" placeholder="请输入昵称"></el-input>
                </el-form-item>

                <el-form-item label="车位剩余数量" prop="caSurplus" required="true">
                  <el-input size="small" v-model="editForm.caSurplus" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="车位停车价格"  prop="caPrice"  required="true">
                  <el-input size="small" v-model="editForm.caPrice" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="updateCarAddress">修改</el-button>
              </div>
            </el-dialog>

          </div>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>

import {selectCarAddress, ParkingLots, statistic3, updateCarAddress} from "../../api/payMG";
import {updateUser} from "../../api/userMG";


export default {
  name: 'echartsTest',
  components: {},
  data(){
    return{
      editFormVisible:false,
      editForm:{
        plName:'',
      },
      editForm2:{
        caId:'',
        caPrice:'',
        caSurplus:'',
        caTotal:'',
        plId:'',
      },
      time:null,
      datas:null,
      data2:[],
      formInline:{
        datearea: '',
      },
      parkings:[],
    }
  },
  mounted() {
    this.statistic3();
  },
  created() {
    this.selectCarAddress();
  },


  methods: {

    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
        this.addFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },

    selectCarAddress(){
      selectCarAddress().then(result=>{
        if(result.code==0){
          let data=result.data;
          this.data2=data;
        }else {
          this.$message({
            type: 'info',
            message: result.msg
          })
        }
      })
    },


    handleEdit(index, row) {
      if (row != undefined && row != 'undefined') {
        this.editFormVisible = true
        this.title = '修改停车场车位信息'
        this.editForm = row;
        this.editForm.plName=row.parkingLotVO.plName,
        console.log(row)
      }
    },

    updateCarAddress(){
      // this.editForm.push({plId:this.editForm.parkingLotVO.plId});
      this.editForm2.caId=this.editForm.caId;
      this.editForm2.caPrice=this.editForm.caPrice;
      this.editForm2.caTotal=this.editForm.caTotal;
      this.editForm2.caSurplus=this.editForm.caSurplus;
      this.editForm2.plId=this.editForm.parkingLotVO.plId;
      updateCarAddress(this.editForm2).then(res =>{
        console.log("====",this.editForm2);
        if (res.code==0){
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.editFormVisible = false
          this.loading = false
          this.selectCarAddress()
          this.statistic3()
        }else {
          this.$message({
            type: 'warning',
            message: '输入数据错误，请检查',
          })
        }
      })
    },


    getdata(parameter) {
      this.statistic3(parameter);
    },

    onExample() {
      // 基于准备好的dom，初始化echarts实例
      let myChart  = this.$echarts.init(document.getElementById('main'));

 /*     var datas = [
        ////////////////////////////////////////
        [
          { name: '停车场1总车位', value: 200 },
          { name: '剩余车位', value: 40 },
        ],
        // ////////////////////////////////////////
        [
          { name: '停车场2总车位', value: 500 },
          { name: '剩余车位', value: 100 },
        ],
        ////////////////////////////////////////
      ];*/
      var datas = this.datas;
      let option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series: datas.map(function (data, idx) {
          var top = idx * 33.3;
          return {
            type: 'pie',
            radius: [10, 80],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: 800,
            itemStyle: {
              borderColor: '#312d2d',
              borderWidth: 2
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 个}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 30,
              rich: {
                time: {
                  fontSize: 30,
                  color: '#d21010'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: data
          };
        })
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    },

    statistic3(parameter){
      statistic3(parameter).then(result=>{
        if(result.code==0){
            let data=result.data;
            this.datas=[];
            this.datas=data;
            this.onExample();
          }else {
          this.$message({
            type: 'info',
            message: result.msg
          })
        }
      })
    },
  }
}
</script>
<style scoped>
/* Table Head */
#table-6 thead th {
  background-color: rgb(128, 102, 160);
  color: #fff;
  border-bottom-width: 0;
  border-width: 1px;
}

/* Column Style */
#table-6 td {
  border-width: 1px;
  color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(128, 102, 160);
}

/* Padding and font style */
#table-6 td, #table-6 th {
  padding: 5px 10px;
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
  border-width: 1px;
}
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
</style>
